<template>
  <div class="user-game-container">
    <div class="titles">
      <div>游戏名称</div>
      <div>总时长</div>
      <div>两周内</div>
      <div>成就</div>
    </div>
    <div class="list">
      <van-pull-refresh v-model="pullLoading" @refresh="onRefresh" success-text="已经是最新啦~">
        <van-list v-model:loading="loading" :finished="finished" finished-text="——没有更多了——" @load="onLoad">
          <div class="list-item" v-for="item in gameInfo">
            <van-image radius="4px" width="120" height="60" :src="item.imgUrl" />
            <div class="game-info">
              <p class="row-1">{{ item.gameName }}</p>
              <div class="row-2">
                <div class="time">
                  <p>{{ item.duration }} h</p>
                  <p style="font-size: 13px;">{{ item.recentDuration }} h</p>
                  <div style="font-size: 13px;">
                    <span style="color: #969799;">{{ item.completedAchievements }}</span>
                    <span>/</span>
                    <span>{{ item.totalAchievement }}</span>
                  </div>
                </div>
                <van-progress :show-pivot="false"
                  :percentage="percentage(item.completedAchievements, item.totalAchievement)"
                  :color="randomProgressBgc()" style="margin-top: 5px;" />
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, reactive } from 'vue';

const gameInfo = reactive([{
  imgUrl: '../../../public/img/Games/1647576156583.png',
  gameName: '战争雷霆',
  duration: 816,
  recentDuration: 25.2,
  completedAchievements: 23,
  totalAchievement: 53
}, {
  imgUrl: '../../../public/img/Games/1647576161052.png',
  gameName: '绝地求生',
  duration: 637,
  recentDuration: 17.3,
  completedAchievements: 33,
  totalAchievement: 37
}, {
  imgUrl: '../../../public/img/Games/1647576164697.png',
  gameName: 'CS:GO',
  duration: 634,
  recentDuration: 6.5,
  completedAchievements: 109,
  totalAchievement: 167
}, {
  imgUrl: '../../../public/img/Games/1647576168981.png',
  gameName: '帝国时代2：决定版',
  duration: 136,
  recentDuration: 0.0,
  completedAchievements: 35,
  totalAchievement: 191
}, {
  imgUrl: '../../../public/img/Games/1647576172784.png',
  gameName: '怪物猎人：世界',
  duration: 110,
  recentDuration: 0.0,
  completedAchievements: 28,
  totalAchievement: 100
}, {
  imgUrl: '../../../public/img/Games/1647582857526.png',
  gameName: '异星工厂',
  duration: 93.4,
  recentDuration: 0.0,
  completedAchievements: 21,
  totalAchievement: 38
}, {
  imgUrl: '../../../public/img/Games/1647582861224.png',
  gameName: '求生之路2',
  duration: 59.5,
  recentDuration: 0.0,
  completedAchievements: 26,
  totalAchievement: 101
}, {
  imgUrl: '../../../public/img/Games/1647582864748.png',
  gameName: '幸福工厂',
  duration: 58.6,
  recentDuration: 0.0,
  completedAchievements: 17,
  totalAchievement: 24
}, {
  imgUrl: '../../../public/img/Games/1647582870400.png',
  gameName: '僵尸毁灭工程',
  duration: 56.8,
  recentDuration: 0.0,
  completedAchievements: 15,
  totalAchievement: 17
}, {
  imgUrl: '../../../public/img/Games/1647582874835.png',
  gameName: 'GTFO',
  duration: 44.0,
  recentDuration: 0.0,
  completedAchievements: 21,
  totalAchievement: 35
}, {
  imgUrl: '../../../public/img/Games/1647582878587.png',
  gameName: '荒野大镖客：救赎2',
  duration: 30.0,
  recentDuration: 0.0,
  completedAchievements: 6,
  totalAchievement: 51
}, {
  imgUrl: '../../../public/img/Games/1647582883310.png',
  gameName: '极品飞车：热度',
  duration: 21.7,
  recentDuration: 0.0,
  completedAchievements: 16,
  totalAchievement: 42
}, {
  imgUrl: '../../../public/img/Games/1647582886755.png',
  gameName: 'Apex 英雄',
  duration: 23.8,
  recentDuration: 0.0,
  completedAchievements: 9,
  totalAchievement: 12
}, {
  imgUrl: '../../../public/img/Games/1647582893209.png',
  gameName: '文明6',
  duration: 13.2,
  recentDuration: 0.0,
  completedAchievements: 10,
  totalAchievement: 307
}])
const newGameInfo = reactive([{
  imgUrl: '../../../public/img/Games/1647576156583.png',
  gameName: '战争雷霆',
  duration: 816,
  recentDuration: 25.2,
  completedAchievements: 23,
  totalAchievement: 53
}, {
  imgUrl: '../../../public/img/Games/1647576161052.png',
  gameName: '绝地求生',
  duration: 637,
  recentDuration: 17.3,
  completedAchievements: 33,
  totalAchievement: 37
}, {
  imgUrl: '../../../public/img/Games/1647576164697.png',
  gameName: 'CS:GO',
  duration: 634,
  recentDuration: 6.5,
  completedAchievements: 109,
  totalAchievement: 167
}, {
  imgUrl: '../../../public/img/Games/1647576168981.png',
  gameName: '帝国时代2：决定版',
  duration: 136,
  recentDuration: 0.0,
  completedAchievements: 35,
  totalAchievement: 191
}, {
  imgUrl: '../../../public/img/Games/1647576172784.png',
  gameName: '怪物猎人：世界',
  duration: 110,
  recentDuration: 0.0,
  completedAchievements: 28,
  totalAchievement: 100
}, {
  imgUrl: '../../../public/img/Games/1647582857526.png',
  gameName: '异星工厂',
  duration: 93.4,
  recentDuration: 0.0,
  completedAchievements: 21,
  totalAchievement: 38
}, {
  imgUrl: '../../../public/img/Games/1647582861224.png',
  gameName: '求生之路2',
  duration: 59.5,
  recentDuration: 0.0,
  completedAchievements: 26,
  totalAchievement: 101
}, {
  imgUrl: '../../../public/img/Games/1647582864748.png',
  gameName: '幸福工厂',
  duration: 58.6,
  recentDuration: 0.0,
  completedAchievements: 17,
  totalAchievement: 24
}, {
  imgUrl: '../../../public/img/Games/1647582870400.png',
  gameName: '僵尸毁灭工程',
  duration: 56.8,
  recentDuration: 0.0,
  completedAchievements: 15,
  totalAchievement: 17
}, {
  imgUrl: '../../../public/img/Games/1647582874835.png',
  gameName: 'GTFO',
  duration: 44.0,
  recentDuration: 0.0,
  completedAchievements: 21,
  totalAchievement: 35
}, {
  imgUrl: '../../../public/img/Games/1647582878587.png',
  gameName: '荒野大镖客：救赎2',
  duration: 30.0,
  recentDuration: 0.0,
  completedAchievements: 6,
  totalAchievement: 51
}, {
  imgUrl: '../../../public/img/Games/1647582883310.png',
  gameName: '极品飞车：热度',
  duration: 21.7,
  recentDuration: 0.0,
  completedAchievements: 16,
  totalAchievement: 42
}, {
  imgUrl: '../../../public/img/Games/1647582886755.png',
  gameName: 'Apex 英雄',
  duration: 23.8,
  recentDuration: 0.0,
  completedAchievements: 9,
  totalAchievement: 12
}, {
  imgUrl: '../../../public/img/Games/1647582893209.png',
  gameName: '文明6',
  duration: 13.2,
  recentDuration: 0.0,
  completedAchievements: 10,
  totalAchievement: 307
}])
// 计算进度条百分百
const percentage = (comp, total) => {
  return (comp / total) * 100
}
// 随机进度条颜色
const BgcList = [
  'linear-gradient(to right, #ff9f00, #f58045)',
  'linear-gradient(to right, #fa6eff, #cb33ff)',
  'linear-gradient(to right, #52b7ff, #1a91fe)',
  'linear-gradient(to right, #8fd427, #59d01b)',
]
const randomProgressBgc = () => {
  const random_number = Math.floor(Math.random() * Math.floor(4));
  return BgcList[random_number]
}

// 上拉加载更多
let index = 0
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
  setTimeout(() => {
    gameInfo.push(...gameInfo)
    loading.value = false
    index++
    if (1 < index) {
      finished.value = true;
    }
  }, 1000);
};

// 下拉刷新
const pullLoading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    gameInfo.length = 0
    gameInfo.push(...newGameInfo)
    pullLoading.value = false;
  }, 1000);
};

</script>

<style scoped>
.titles {
  padding: 10px 12px;
  border-bottom: 1px solid #f2f3f5;
  font-size: 10px;
  color: #969799;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
}

.list .list-item {
  padding: 5px 12px 5px 12px;
  display: flex;
  background-color: #fff;
}

.list .list-item .game-info {
  margin-left: 10px;
  font-size: 15px;
  line-height: 21px;
  flex: 1;
}

.list .list-item .game-info .row-2 {
  margin-top: 5px;
}

.list .list-item .game-info .row-2 .time {
  display: flex;
  justify-content: space-between;
}
</style>
